<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM</title>
    <script>
        // DOM：Document Object Model 文档对象模型
        // 把整个 HTML 文档封装为一个对象模型，具体来说就是 document 对象
        console.log(window.document);

        // DOM 树
        // HTML 标签以 html 为根标签，子标签层层嵌套，形成一个树形结构

        // 元素(Element)：HTML 标签封装为 JavaScript 对象就称之为元素对象，也可以说每一个 HTML 标签都有一个和它对应的 DOM 元素对象
        // 属性(Attribute)：HTML 标签的属性封装 JavaScript 对象就称之为属性对象
        // 文本(Text)：HTML 标签的文本标签体封装的 DOM 对象
        // 以上三个类型抽取了一个父类：节点(Node)

        // 树形结构建立之后，自然就会产生：父子、兄弟关系、先辈后代关系
    </script>
</head>
<body>

    <input type="text" name="userName" value="good" />
    <p>AAAAAAAAAAAAAAAAAAAAAA</p>

</body>
</html>